<template>
	<gui-page :fullPage="true" :apiLoadingStatus="apiLoadingStatus" ref="guipage">
		<template v-slot:gBody>
			<view id="header">
				<gui-a-header title="政策解读"></gui-a-header>
				<view class="search flex-ac-jb">
					<view class="flex1">
						<gui-search2 :disabled="true" @tapme="$u.to(`/pages/search/search?type=1`)"
							:customClass="['bgfff','border']" height="53rpx" borderRadius="14rpx"
							placeholder="输入关键字，搜索您想要的" placeholderClass="plStyle"></gui-search2>
					</view>
				</view>
				<view class="header gui-border-b gui-border-box gui-flex gui-column gui-justify-content-center">
					<gui-switch-navigation v-show="!pageLoading" :width="650" :size="136" :currentIndex="currentIndex"
						:items="tabs" activeDirection="center" activeLineWidth="80rpx" textAlign="center"
						@change="navchange"></gui-switch-navigation>
				</view>
			</view>
			<swiper :current="currentIndex" :style="{height:mainHeight+'px', width:'750rpx'}" @change="swiperChange">
				<!-- 轮播项目数量对应 上面的选项标签 -->
				<swiper-item v-for="(items, orderIndex) in dataList" :key="orderIndex">
					<!-- 骨架 占位 -->
					<view v-if="pageLoading">
						<view class="news-list gui-flex gui-rows gui-nowrap mt20" v-for="(itm, index) in 10"
							:key="index">
							<view class="skeleton gui-flex gui-align-items-center">
								<view>
									<gui-skeleton :canShow="false" :customClass="[]"
										customStyle="height:40rpx;width:450rpx;border-radius:6rpx;margint-left: 20rpx;background: #efefef;"></gui-skeleton>
									<view style="height: 20rpx;"></view>
									<gui-skeleton :canShow="false" :customClass="[]"
										customStyle="height:40rpx; border-radius:6rpx;width: 188rpx;margint-left: 20rpx;background: #efefef;"></gui-skeleton>
								</view>
								<view style="width: 20rpx;"></view>
								<gui-skeleton :canShow="false" :customClass="[]"
									customStyle="height:140rpx; border-radius:6rpx;width: 211rpx;background: #efefef;"></gui-skeleton>
							</view>
						</view>
					</view>
					<!-- 使用滚动区域来实现主体内容区域 -->
					<scroll-view :style="{height:mainHeight+'px'}" :scroll-y="true" @touchstart="touchstart"
						@touchmove="touchmove" @touchend="touchend" @scrolltolower="loadmorefun" @scroll="scroll">
						<!-- 刷新组件 -->
						<gui-refresh @reload="reload" ref="refreshcom"></gui-refresh>
						<gui-empty v-if="items == null || items.length <= 0">
							<template v-slot:img>
								<view class="gui-flex gui-rows gui-justify-content-center">
									<image class="nodata-img" src="@/static/image/no_curriculum_vitae.png"
										mode="widthFix">
									</image>
								</view>
							</template>
							<template v-slot:text>
								<text
									class="gui-text-small gui-block gui-text-center gui-margin-top gui-color-gray">暂无数据</text>
								<view class="zw" style="height: 200rpx;"></view>
							</template>
						</gui-empty>
						<!-- 数据展示区域 -->
						<view class="policy-list bgfff" v-if="items != null">
							<view class="swiper z-index1" v-show="orderIndex == 0">
								<gui-swiper :swiperItems="swiperItems" :spacing="0" :padding="0" imgMode="scaleToFill"
									:width="692" :height="300" @taped="bannerClick"></gui-swiper>
							</view>
							<view class="policy-item gui-flex"
								@click="$u.to(`/pages/index/policy/details?policyId=${order.id}`)"
								v-for="(order, oIndex) in items" :key="oIndex">
								<view class="info gui-flex1">
									<view class="f26 c333 title qoverDot2">
										{{order.title}}
									</view>
									<view class="f22 stress mt10 c999">
										{{order.creBy}} ‧ {{order.createTime}}
									</view>
								</view>
								<view class="policy-img">
									<gui-image :src="order.img" mode="aspectFill" :width="211" :height="140"
										borderRadius="5rpx"></gui-image>
								</view>
							</view>
						</view>
						<!-- 加载组件 -->
						<gui-loadmore ref="loadmorecom"></gui-loadmore>
					</scroll-view>
				</swiper-item>
			</swiper>

		</template>
	</gui-page>
</template>

<script setup>
	import graceJS from "@/Grace6/js/grace.js"
	import {
		selectPromptType,
		selectPromptList,
		selectPolicBannerList
	} from '@/api/app.js'
	import {
		ref,
		reactive,
		onMounted,
		inject
	} from 'vue';
	const $u = reactive(inject('$u'))
	const loadmorecom = ref([])
	const refreshcom = ref([])

	// 查询条件
	const query = ref({
		refPolicyTypeId: ''
	})

	var page = 1;
	const pages = ref([])
	const pageSize = 10;
	const scrollTops = ref([])
	const apiLoadStatus = ref([])
	const navHeight = ref(getApp().globalData.navHeight)
	const guipage = ref(null);
	const dataList = ref([]);
	const pageLoading = ref(true);
	const apiLoadingStatus = ref(false);
	const mainHeight = ref(200)
	const currentIndex = ref(0)
	// 滚动延迟
	const scrollTimer = ref(null)
	// 加载更多延迟
	const loadMoreTimer = ref(null)
	const tabs = ref([]);
	const swiperItems = ref([])

	const bannerClick = (e) => { //轮播图点击
		console.log(e);
		$u.bannerJump(swiperItems.value[e])
	}

	onMounted(() => {
		// 01. 获取页面主体高度
		setTimeout(() => {
			graceJS.getRefs(guipage, 0, (ref) => {
				ref.getDomSize('guiPageBody', (e) => {
					graceJS.select('#header', (e2) => {
						mainHeight.value = e.height - e2.height;
					})
				});
			});
		}, 20)
		setTimeout(() => {
			loadClass();
		}, 100);
	})

	const loadCom = () => {
		if (!dataList.value[currentIndex.value]) {
			return;
		}
		if (dataList.value[currentIndex.value].length < 1) {
			loadData();
		}
	}

	// 分类切换
	const navchange = (e) => {
		currentIndex.value = e;
	}

	// 轮播切换
	const swiperChange = (e) => {
		currentIndex.value = e.detail.current;
		let tabsData = Object.assign(tabs.value, {})
		query.value.refPolicyTypeId = tabsData[e.detail.current].id
		loadCom();
	}
	// 滚动区域滚动
	const scroll = (e) => {
		if (scrollTimer.value != null) {
			clearTimeout(scrollTimer.value);
		}
		scrollTimer.value = setTimeout(() => {
			scrollTops.value.splice(currentIndex.value, 1, e.detail.scrollTop);
		}, 100);
	}
	// 下拉刷新相关事件绑定
	const touchstart = (e) => {
		if (apiLoadStatus.value[currentIndex.value]) {
			return;
		}
		if (scrollTops.value[currentIndex.value] > 0) {
			return;
		}
		refreshcom.value[currentIndex.value].touchstart(e);
	}

	const touchmove = (e) => {
		if (apiLoadStatus.value[currentIndex.value]) {
			return;
		}
		if (scrollTops.value[currentIndex.value] > 0) {
			return;
		}
		refreshcom.value[currentIndex.value].touchmove(e);
	}
	const touchend = (e) => {
		if (apiLoadStatus.value[currentIndex.value]) {
			return;
		}
		if (scrollTops.value[currentIndex.value] > 0) {
			return;
		}
		refreshcom.value[currentIndex.value].touchend(e);
	}
	// 刷新事件
	const reload = () => {
		pages.value[currentIndex.value] = 1;
		loadmorecom.value[currentIndex.value].stoploadmore();
		loadData(1);
	}
	// 加载更多事件
	const loadmorefun = () => {
		let currentIndexVal = currentIndex.value;
		if (apiLoadStatus.value[currentIndexVal]) {
			return;
		}
		if (loadmorecom.value[currentIndexVal].loadMoreStatus != 0) {
			return;
		}
		if (loadMoreTimer.value != null) {
			clearTimeout(loadMoreTimer.value);
		}
		loadMoreTimer.value = setTimeout(() => {
			loadmorecom.value[currentIndexVal].loading();
			loadData();
		}, 80);
	}

	const loadClass = () => {
		tabs.value = [{
			id: '',
			name: '推荐'
		}];
		selectPromptType().then(res => {
			if (res.code == 200) {
				let result = res.data;
				result.forEach(item => {
					tabs.value.push({
						id: item.id,
						name: item.policyTypeName
					})
				})
				for (var i = 0; i < tabs.value.length; i++) {
					dataList.value.push([]);
					pages.value.push(1);
					scrollTops.value.push(0);
					apiLoadStatus.value.push(false);
				}
				loadData();
				loadBanner();
			}
		})
	}

	const loadData = (isReload) => {
		let queryParam = Object.assign(query.value, {})
		let currentValue = currentIndex.value;
		selectPromptList({
			pageNum: pages.value[currentValue],
			pageSize,
			...queryParam
		}).then(res => {
			if (res.code == 200) {
				let total = Math.ceil(res.total / pageSize);
				if (pages.value[currentValue] == 1) {
					dataList.value.splice(currentValue, 1, res.rows);
				} else {
					dataList.value[currentValue] = dataList.value[currentValue].concat(res.rows);
					loadmorecom.value[currentValue].stoploadmore();
					if (pages.value[currentValue] >= total) {
						loadmorecom.value[currentValue].nomore();
					}
				}
			}
			// 刷新
			if (isReload) {
				refreshcom.value[currentValue].endReload();
			}
			pages.value[currentValue]++;
			apiLoadStatus.value.splice(currentValue, 1, false);
			pageLoading.value = false;
		})
	}

	// 查询轮播图
	const loadBanner = () => {
		selectPolicBannerList().then(res => {
			if (res.code == 200) {
				let result = res.data;
				swiperItems.value = [];
				result.forEach(item => {
					swiperItems.value.push({
						id: item.id,
						img: item.bannerImg,
						opentype: 'click',
						bannerAddress: item.bannerAddress,
						bannerType: item.bannerType,
						bannerKind: item.bannerKind
					})
				})
			}
		})
	}
</script>

<style lang="scss">
	.header {
		background-color: #fff;
		padding: 15rpx 30rpx;
		height: 100rpx;
	}

	.skeleton {
		background: #fff;
		padding: 0 40rpx;
		height: 200rpx;
	}

	.search {
		padding: 0rpx 34rpx 30rpx 34rpx;
		background: linear-gradient(180deg, #4072FE 0%, #4072FE 100%);

		.border {
			border: 1px solid #ccc;
		}
	}
</style>